<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>place_order</title>
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <style>
        
        .address_container {
            display: flex;
            flex-direction: column;
            background-color: white;
        }

        .address_box {
            display: flex;
            flex-direction: row;
            align-items: center;
            min-height: 85px;
            margin: 15px;
            border: 1px solid #f5f5f5;
            border-radius: 4px;
        }

        .address_img {
            width: 32px;
            height: 32px;
            margin-left: 10px;
        }

        .address_wrap {
            justify-content: center;
            flex: 1;
            margin: 0 15px;
        }

        .noaddress {
            font-size: 15px;
            color: #333333;
        }

        .address_tit {
            display: flex;
            flex-direction: row;
        }

        .address_name {
            font-size: 15px;
            color: #333333;
        }

    
        .address_phone {
            margin-top: 2px;
            font-size: 13px;
            color: #777777;
        }

        .address_details {
            margin-top: 5px;
            font-size: 12px;
            color: #333333;
        }

        .address_gor {
            width: 14px;
            height: 14px;
            margin-right: 10px;
        }

        .list_box {
            margin-top: 8px;
            background: white;
        }

        .list_count {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            height: 44px;
            padding: 0 15px;
        }

        .list_zi {
            font-size: 14px;
            color: #333333;
        }

        .list_all {
            font-size: 14px;
            color: #fe904a;
        }

        .order-goods-page {
            background-color: white;
        }

        .order-goods-item {
            display: flex;
            flex-direction: row;
            padding-bottom: 15px;
            margin: 15px 15px 0;
            border-bottom: 1px solid #f8f8f8;
        }

        .order-goods-img {
            width: 90px;
            height: 68px;
            margin-right: 12px;
            border-radius: 4px;
        }

        .order-goods-right {
            align-content: center;
            flex: 1;
        }

        .order-goods-title {
            font-size: 14px;
            color: #333333;
        }

        .order-goods-guige-box {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-top: 5px;
        }

        .order-goods-guige,
        .order-goods-num {
            font-size: 12px;
            color: #999999;
        }

        .order-goods-bottom {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
        }

        .order-goods-price {
            font-size: 14px;
            color: #fe904a;
        }

        .order-goods-btn {
            width: 70px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            margin-left: 8px;
            border-radius: 2px;
            font-size: 14px;
            padding: 0 3px;
        }

        .order-goods-btn-gray {
            background-color: white;
            border: 1px solid #b5b5b5;
            color: #999999;
        }

 
        .ge_box {
            padding: 0 15px;
            margin-top: 8px;
            background-color: white;
        }

        .ge_list {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            height: 55px;
        }

        .border-bottom {
            border-bottom: 1px solid #f8f8f8;
        }

        .ge_zi {
            font-size: 16px;
            color: #393f44;
        }

        .ge_rzi {
            font-size: 14px;
            color: #979ea6;
        }

        .bei_zi {
            font-size: 14px;
            margin-left: 15px;
            margin-top: 15px;
            margin-bottom: 4px;
            color: #6c7279;
        }

        .bei_box {
            height: 122px;
            padding: 14px 15px;
            margin-bottom: 10px;
            background-color: white;
        }

        .bei_area {
            width: auto;
            height: 100%;
            border: none;
        }

        .footer-btn {
            background-color: white;
        }

        .floor_btns {
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
            height: 54px;
        }

        .floor_zi {
            font-size: 13px;
            margin-right: 10px;
            color: #999999;
        }

        .floor_rzi {
            font-size: 14px;
            color: #333333;
        }

        .floor_szi {
            font-size: 14px;
            color: #fe5c00;
        }

        .floor_mzi {
            font-size: 18px;
            color: #fe5c00;
            margin-right: 15px;
        }

        .floor_btn {
            width: 100px;
            height: 40px;
            border-radius: 2px;
            margin-right: 15px;
            line-height: 40px;
            text-align: center;
            font-size: 16px;
            background-color: #ff7037;
            color: white;
        }

        .floor_btn:active {
            opacity: 0.7;
        }
        .flex-auto {
            flex: auto;
        }
    </style>
</head>

<body>
    <div class="page"  @vue:mounted="mounted">
        <div class="nav-bar">
            <div onclick="core.back()" class="nav-bar-back">
                <span class="icon iconfont icon-fanhui m_r_10"></span>
                <span class="nav-bar-back-text">返回</span>
            </div>
            <span class="nav-bar-title">立即购买</span>
        </div>
        <div class="scroll-view-y flex-auto">
            <!-- 收货地址 -->
            <div class="address_container">
                <div class="address_box">
                    <img class="address_img" src="../images/main1/address.png"/>
                    <div class="address_wrap">
                        <!-- 配送 -->
                        <div class="address_cont">
                            <div class="address_tit">
                                <span class="address_name " >{{data.name}}</span>
                                <div class="flex1"></div>
                                <span class="address_phone "   >{{data.phone}}</span>
                            </div>
                            <span class="address_details"><span class=""  >{{data.qustr}}</span>  
                            <span class="address_details"><span class=""  >{{data.address}} </span>  
                        </div>
                    </div>
                   <div class="addrselect" @click="selectAddr()">选择</div> 
                </div>
            </div>
            <!-- 商品信息 -->
            <div class="good-info " >
                <div class="list_box  " >
                    <div class="order-goods-page" v-for="item of data.list">
                        <div class="order-goods-item">
                            <img class="order-goods-img " :src="item.img" mode="aspectFill" />
                            <div class="order-goods-right">
                                <span class="order-goods-title "  >{{item.title}}</span>
                                <div class="order-goods-guige-box">
                                    <span class="order-goods-guige"></span>
                                    <span class="order-goods-num "  >{{item.buynum}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="list_count">
                            <span class="list_zi">小计</span>
                            <span class="list_all "   >{{item.buynum * item.price }}</span>
                        </div>
                    </div>
                    
                </div>
            </div>
            <!-- 配送方式 -->
            <div class="delivery">
                <div class="ge_box">
                    <div class="ge_list border-bottom">
                        <span class="ge_zi">配送方式</span>
                        <span class="ge_rzi">快递包邮</span>
                    </div>
                
                </div>
            </div>
            <!-- 备注 -->
            <div class="remark">
                <!-- 备注 -->
                <span class="bei_zi">备注</span>
                <div class="bei_box">
                    <textarea class="bei_area" id="beizhu" value=""
                        placeholder="备注信息"></textarea>
                </div>
            </div>

        </div>
        <!-- 底部按钮 -->
        <div class="footer-btn">
            <div class="floor_btns">
                <span class="floor_zi">共{{data.allc}}件</span>
                <span class="floor_rzi">合计：</span>
                <span class="floor_szi">¥</span>
                <span class="floor_mzi">{{data.sum}}</span>
                <span class="floor_btn" @click="orderAndPay()">下单支付</span>
            </div>
        </div>
    </div>
</body>
<script src="../script/api.js"></script>
<script src="../script/common.js"></script>
 
 

<script  type="module">
    import { createApp } from 'https://www.chenxiangle.com/app/web/script/pvue.js'
    const APP = ()=>{
        createApp({
        data:  { 
            list:[],
          sum:0,
          allc:0,
          name :"",
          phone:"",
          qustr:"",
          address:"",
        },
          initcart(){
        var cart =  $api.getStorage('car' );
        var cartnew = [];
        for(var i = 0 ;i<cart.length ;i++){
            if(cart[i].checked){
                cart[i].content=undefined;
                cart[i].pos = i ;
                 cartnew.push( cart[i]);
                this.data.allc = this.data.allc +  cart[i].buynum ;
                this.data.sum =  this.data.sum +   cart[i].buynum * cart[i].price
                        }
        } 
        this.data.list = cartnew ;
        this.initAddr();
        window.initAddr = this.initAddr;
       
    },  
    async initAddr(){
        let   addr =  await  this.getAddr();
        if(!addr){
             // 跳转到地址添加页面
            this.selectAddr();
            return;
        }
            this.data.name = addr.name
            this.data.phone = addr.phone
            this.data.qustr = addr.qustr
            this.data.address = addr.address
    },
     async    getAddr(){
         let res = await core.post("api/tuser/userdata",{});
         core.log('addr++++++++++')
        core.log(res)
         if( res.length>0){
             return  JSON.parse( res[0].data )
         } else {
 
            return null ;
         }
         
    },  
    selectAddr(){
        api.openWin({
                name: 'addr',
                url:'./address_list.html?id=1'
            });
    }
, async   orderAndPay() {
   
   var s = JSON.stringify(this.data);
   var dt =  { data: s };
  let res = await core.post("api/tnews/saveOrder",dt);
  api.openWin({
            name: 'pay',
            url:'./other.html?action=pay&m=' + this.data.sum + "&id="+ 1521  +"&oid=" + "N2023123" 
        })
    } ,
        mounted() {
            this.initcart(); 
        }
      }).mount( )
    }

    window.apiready = ()=> {
        $api.fixStatusBar($api.dom('.nav-bar'));
        APP();
    }
</script>
<script>
   

    
    

   

  


  
</script>

</html>